<template>
  <div class="center">
    <div class="center-box" v-show="state==0">
      <div class="content">
        <h2>通过IIFA查询职业认证信息</h2>
        <div class="title-content">
          本页面为IIFA China职业认证CIFA、CWA持证人员信息查询入口，仅针对中国大陆、港澳台地区的认证考生信息开放查询，其它地区的用户请联系IIFA总部或当地认证中心进行查询。
        </div>
      </div>
      <div class="search-lable">
        <label>
          持证人姓名
        </label>
        <label class="label1">
          证书编号
        </label>

      </div>
      <div class="search">
        <input placeholder="输入持证人姓名" v-model="formData.name">
        <input placeholder="输入证书编号" v-model="formData.certificateNo" class="location">
        <div @click="search">Search</div>
      </div>
      <div class="promise">
        <div class="agree">
          <input type="checkbox" id="agree" name="agree" :checked="checked">
          <span>我同意以下信息查询条款
          </span>
        </div>
        <div class="promiseArea">
          使用此入口验证职业认证持有人身份，仅限于本人、用人单位、高等院校及相关合法背调单位进行资格验证，请勿他用。
          <br>
          <br>
          严禁将本认证查询信息作为商业用途或出售、或公开发布，以上行为可能违反法律，IFA China保留针对任何不当使用持证人信息的当事方采取起诉等维权措施的权利。
          <br>
          <br>

          获得认证只代表学员完成相关领域课程学习，通过职业认证考试，并不代表IFA对其推荐。 <br>

        </div>
      </div>
    </div>
    <div v-show="state==1" >
      <el-table :data="dataSource" v-if="dataSource.length>0" border   >
        <el-table-column prop="egName" label="英文名称" />
        <el-table-column prop="name" label="中文名" />
        <el-table-column prop="idCard" label="身份证号" />
        <el-table-column prop="projectName" label="认证类型" />
        <el-table-column prop="levelName" label="认证级别" />
        <el-table-column prop="certificateNo" label="证书编号" /> 
        <el-table-column prop="sendingTime" label="认证时间" />
        
    </el-table>
    <el-empty v-else :description="description"></el-empty>
    <div class="btn_all"> 
       <el-button class="btn_step" type="primary" @click="step">返回</el-button>
      </div>
    </div>
    
  </div>
</template>
<script setup lang="ts">
import {certificateApi} from '@/api/member/certificateInfo'
import type {CertificateModel} from '@/api/member/certificateInfo'
const description=ref<string>('对不起，没查询到相关信息！')
const dataSource=ref<CertificateModel[]>([])
const state=ref<number>(0)
const formData=ref({name:'',certificateNo:''})
async function search(){
  if(formData.value.name===''){
    ElMessage.error('请输入持证人姓名')
    return false
  }
  if(formData.value.certificateNo===''){
     ElMessage.error('请输入持证编号') 
     return false
  }
  const res=await certificateApi(formData.value)
  if(res.code===200){
    dataSource.value=res.data??[]
    state.value=1
  }else{
    ElMessage.error(res.msg)
  }
  
}
const checked=ref<boolean>(true)
function step(){
  state.value=0
}
</script>
<style scoped lang='less'>
.tops {
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.tops img {
  width: 100%;
}

.tops span {
  position: absolute;
  transform: translate(-50%);
  left: 50%;
  font-size: 30px;
  line-height: 28px;
  color: #ffffff;
  font-weight: bold;
  top: 30%;
}

.tops p {
  width: 64px;
  height: 4px;
  background-color: #ffffff;
  position: absolute;
  transform: translate(-50%);
  top: 50%;
  left: 50%;
}

.center {
  width: 1200px;
  margin: 25px auto 0;
}

.center .center-top {
  position: relative;
  display: flex;
  justify-content: start;
  left: 0;
  padding: 20px 0;
  margin-left: 15px;
}

.center .center-top img {
  width: 20px;
  height: 20px;
}

.center .center-top span {
  margin-left: 10px;
  font-size: 18px;
}

.center .center-top .gas {
  color: #999;
}

.center .center-box {
  background-color: #fff;
  padding: 30px 0;
  margin-bottom: 30px;
}

.center .center-box .content {
  margin: 0 50px 0 38px;
}

.center .center-box .content h2 {
  text-align: center;
  font-size: 36px;
  color: #d6914c;
  font-weight: bold;
}

.center .center-box .content .title-content {
  width: 1090px;
  overflow: hidden;
  margin: 35px auto;
  font-size: 17px;
  word-wrap: break-word;
  color: #1e222d;
  // text-align: center;
}

.center .center-box .content h3 {
  width: 983px;
  height: 22px;
  margin: 0 auto;
  margin-top: 25px;
  font-size: 22px;
  color: #345aa3;
  font-weight: bold;
  text-align: center;
}

.center .center-box .search-lable {
  font-size: 18px;
  color: #1e222d;
  font-weight: bold;
  font-family: "Arial";
  display: flex;
  margin-top: 50px;
  margin-left: 50px;
}

.center .center-box .search-lable label {
  width: 41%;
}

.center .center-box .search {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.center .center-box .search input {
  width: 36%;
  margin-left: 50px;
  height: 56px;
  font-size: 25px;
  border-radius: 4px;
  color: #333;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
}

.center .center-box .search input:hover {
  cursor: pointer;
}

.center .center-box .search input {
  text-indent: 1rem;
}

.center .center-box .search ::-webkit-input-placeholder {
  font-size: 16px;
  line-height: 28px;
  color: #ccc;
}

.center .center-box .search :-moz-placeholder {
  font-size: 16px;
  line-height: 28px;
  color: #ccc;
}

.center .center-box .search ::-moz-placeholder {
  font-size: 16px;
  line-height: 28px;
  color: #ccc;
}

.center .center-box .search :-ms-input-placeholder {
  font-size: 16px;
  line-height: 28px;
  color: #ccc;
}

.center .center-box .search .location {
  margin-left: 5px;
}

.center .center-box .search div {
  width: 162px;
  height: 58px;
  border-radius: 4px;
  font-size: 22px;
  line-height: 58px;
  margin-right: 50px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  background-color: #92b5d9;
}

.center .center-box .search div:hover {
  background-color: #345aa3;
  cursor: pointer;
}

.center .center-box .promise {
  margin-top: 35px;
  margin-bottom: 40px;
}

.center .center-box .promise h3 {
  font-size: 22px;
  margin-left: 48px;
  color: #345aa3;
  font-weight: bold;
}

.center .center-box .promise .agree {
  margin-left: 46px;
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #333333;
  font-weight: bold;
  margin-bottom: 30px;
}

.agree span {
  // color: #d6914c;
  font-size: 18px;
  color: #333333;
  font-weight: bold;
}

.center .center-box .promise .agree input {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.center .center-box .promise .agree input:hover {
  cursor: pointer;
}

.center .center-box .promise .promiseArea {
  margin-top: 15px;
  margin-left: 50px;
  margin-right: 45px;
  line-height: 20px;
  font-size: 16px;
  color: #333333;
}

.center .jingshi {
  display: flex;
  align-items: center;
  width: 560px;
  height: 72px;
  background-color: #61646c;
  border-radius: 4px;
  position: absolute;
  top: 66%;
  left: 50%;
  opacity: 0.8;
  transform: translate(-50%);
}

.center .jingshi img {
  margin-left: 30px;
  width: 30px;
  height: 30px;
}

.center .jingshi span {
  margin-left: 10px;
  font-size: 16px;
  color: #ffffff;
  font-weight: bold;
}
 

.btn_step {
    margin: 20px 10px 0;
    display: block;
    width: 213px;
    height: 48px;
   
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin: 30px auto 0;
    background-color: #345aa3;
    cursor: pointer;
    margin-bottom: 30px;
}
</style>